<template>
  <div>
    <el-container :style="{ height: screenHeightone }">
      <el-header height="40px">
        <el-button
          type="info"
          size="mini"
          icon="el-icon-arrow-left"
          @click="returnshow"
          class="returnshow" >返回首页</el-button
        >
        <div class="welcomone">欢迎回家!</div></el-header
      >
      <el-container>
        <!-- <el-row> -->
        <el-col :span="4">
          <el-aside width="220px">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-submenu>
                <template slot="title">
                  <i class="el-icon-s-grid"></i>
                  <span>用户中心</span>
                </template>

                <el-menu-item index="1" @click="showUserInfo()">用户管理</el-menu-item>
                <el-menu-item index="2">额度申请</el-menu-item>
                <el-menu-item index="3">申请进度</el-menu-item>
                <el-menu-item index="4">合同详情</el-menu-item>
                
                <el-menu-item index="4" @click="huan">贷款</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          <div class="grid-content bg-purple-dark"></div
        ></el-col>
        <el-col :span="20"
          ><div class="grid-content bg-purple-dark" height="100%">
            <el-main height="100%">
              <!-- <tabs-table v-show="topersoncontol"></tabs-table> -->
              <router-view></router-view>
            </el-main></div
        ></el-col>
        <!-- </el-row> -->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import User from "./User.vue";

export default {
  components: {
    User,
  },
  data() {
    return {
      screenHeightone: document.documentElement.clientHeight + "px",

      // userindex: 1,
      topersoncontol: false,
    };
  },
  methods: {
   
    showUserInfo:function(){      
      // var user= JSON.parse(sessionStorage.getItem("user"));
      // this.$axios.get("users/"+user.userId)
      // .then(res =>{
      //   if(res.data.code == 200){
      //     this.userInfo = res.data.data.userInfo;
      //     sessionStorage.setItem("showUser",JSON.stringify(this.userInfo));
      //   }else{
      //     this.$message.error("系统异常，请稍后再试");
      //   }
      // })

      this.$store.getters.obtainUserInfo.user;
      //记得每次都要重新登录，要不然取不到user，因为这是在登录马上就放到sessionStorage里的，页面时间久未刷新时就会出现undefined      
      this.$router.push("/dept");
    
    },
    returnshow() {
      this.$router.push("/index");
    },
    huan(){
      this.$router.push("/huanKuan");
    },
    het(){
      this.$router.push("/hetong");
    },
    handleOpen(key, keyPath) {
      // this.topersoncontol = true;
      this.$router.push("/userWelcome");

      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // this.topersoncontol = false;
      // this.tophoto = false;

      console.log(key, keyPath);
    },
  },
};
</script>
<style>
.grid-content {
  border-radius: 4px;
}
.welcomone {
  text-align: center;
  color: antiquewhite;
}
.el-header,
.el-footer {
  background-color: #565d66;
  color: rgb(244, 236, 236);
  text-align: center;
  line-height: 33px;
}

.el-aside {
  background-color: #b3cfee;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: rgb(78, 59, 59);
  text-align: center;
  line-height: 60px;
  height: auto;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.returnshow{
  float: left ;
  margin-left: 30px;
}
</style>